 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-col :span="4">
                    <el-input v-model="search.submodule" placeholder="请输入所属模块"></el-input>
                </el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form>
            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" label="Id" sortable> </el-table-column>
                <el-table-column align="center" prop="submodule" label="所属模块"> </el-table-column>
                <el-table-column
                        align="center"
                        prop="question"
                        label="问题"
                        width="300">
                    <template slot-scope="scope">
                        <div v-html="scope.row.question" style="min-height:24px"></div>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="answer"
                        label="答案"
                        width="300">
                    <template slot-scope="scope">
                        <div v-html="scope.row.answer" style="min-height:24px"></div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="addtime" label="添加时间"> </el-table-column>
                <el-table-column align="center" label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button size="small" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                            >编辑</el-button>
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"></el-pagination>


            <!--新增/修改 Form -->
            <el-dialog title="客服问答" :visible.sync="editInfoState">
                <el-form :model="formInfo">
                    <el-form-item label="所属模块" :label-width="formLabelWidth">
                        <el-select
                                v-model="formInfo.submodule"
                                multiple
                                filterable
                                allow-create
                                default-first-option
                                placeholder="所属模块">
                            <el-option v-for="item in optionsType"
                                       :key="item"
                                       :label="item"
                                       :value="item">
                                {{item}}
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
                    </v-form-render>
<!--                    <el-button type="primary" @click="submitForm">Submit</el-button>-->
<!--                    <el-form-item label="添加时间" :label-width="formLabelWidth">-->
<!--                        <el-date-picker v-model="formInfo.addtime" placeholder="添加时间" auto-complete="off" type="date"></el-date-picker>-->
<!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editInfoState = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

 <script>
 import Vue from 'vue';
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            tableData: [],
            powerData: [],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            pageNum: 1,
            pageSize: 5,
            total:0,
            formInfo: {},
            search: {},
            formLabelWidth: '120px',
            editInfoState: false,
            formJson: {"widgetList":[{"type":"rich-editor","icon":"rich-editor-field","formItemFlag":true,"options":{"name":"question","label":"问题","placeholder":"","labelWidth":"","labelHidden":false,"columnWidth":"200px","disabled":false,"hidden":false,"required":false,"requiredHint":"","customRule":"","customRuleHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onValidate":""},"id":"richeditor81853"},{"type":"rich-editor","icon":"rich-editor-field","formItemFlag":true,"options":{"name":"answer","label":"答案","placeholder":"","labelWidth":"","labelHidden":false,"columnWidth":"200px","disabled":false,"hidden":false,"required":false,"requiredHint":"","customRule":"","customRuleHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onValidate":""},"id":"richeditor58512"}],"formConfig":{"modelName":"formInfo","refName":"formInfo","rulesName":"rules","labelWidth":120,"labelPosition":"left","size":"mini","labelAlign":"label-right-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
            formData: {},
            optionData: {}
        };
    },
    created: function () {
        this.load();
        this.loadType();
    },
    methods: {
        //初始化数据
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http.post(`/marketing/api/customerIssues/${this.pageNum}/${this.pageSize}`, this.search).then((response) => {
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                    console.log(this.total)
                });
        },

        loadType() {
            var _this = this;
            this.search = {};
            this.$http.get('/marketing/api/customerIssues/findAll' ).then((response) => {
                    _this.optionsType = response.data.data;
                });
        },

        // submitForm() {
        //     this.$refs.vFormRef.getFormData().then(formData => {
        //         // Form Validation OK
        //         // alert( JSON.stringify(formData) )
        //         console.log(formData)
        //     }).catch(error => {
        //         // Form Validation failed
        //         this.$message.error(error)
        //     })
        // },



        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        //刷新
        emptyBtn() {
            this.search = {};
            this.pageNum = 1;
            this.pageSize = 5;
            this.load();
        },
        getStatusName(row, column, cellValue) {
            return cellValue == 1 ? '是' : '否';
        },
        addBtn() {
            // this.$refs.vFormRef.resetForm()
            this.formInfo = {};
            this.editInfoState = true;
        },
        updateInfo: function (index, row) {
            this.formInfo = row;
            this.editInfoState = true;
            let newFormData = row;
            this.$nextTick(() => {
                this.$refs.vFormRef.setFormData(newFormData)
            })

        },
        saveInfo: function () {

            this.$refs.vFormRef.getFormData().then(formData => {
                // Form Validation OK
                // alert( JSON.stringify(formData) )
                console.log(formData)

                this.formInfo.answer = formData.answer
                this.formInfo.question = formData.question
                this.formInfo.submodule = this.formInfo.submodule.toString()

                console.log(this.formInfo)
                var _this = this;
                if (_this.formInfo.id != null && _this.formInfo.id !== '' && _this.formInfo.id !== undefined) {
                    this.$http.put('/marketing/api/customerIssues', _this.formInfo).then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editInfoState = false;
                    }).catch(function (error) {
                        _this.editInfoState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
                } else {
                    this.$http.post('/marketing/api/customerIssues' , _this.formInfo).then(function (response) {
                        //正确请求时，回调函数
                        _this.load();
                        _this.editInfoState = false;
                    })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });
                }
            })
        },
        // 重置
        resetForm(formName) {
            this.$nextTick(()=>{
                this.$refs[formName].resetFields();
            })
        },

        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    var idList = [row.id]
                    this.$http
                        .delete('/marketing/api/customerIssues',{data:idList})
                        .then(function (response) {
                            if (response.data.code === 200) {
                                    //提示成功
                                    _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    //重新加载数据
                                    _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    }
};
</script>
<style>
    .el-dialog{
        width: 80%;
    }
</style>
